Telegram Group & Telegram Channel
🎉 Tailwind CSS v4.1 — тени, маски и удобства для вёрстки

Tailwind обновился до версии 4.1. Формально — минорный апдейт, но на деле получил кучу полезных штук. Особенно для тех, кто много работает с UI и адаптивностью.

Вот что появилось:

Текстовые тени
Добавили text-shadow с 5 размерами (2xslg).
Поддерживаются цветные тени, например:
text-shadow-blue-500/50
📌 Удобно для заголовков и эффекта тиснения — белая полупрозрачная тень + тёмный текст.

🎭 CSS-маски
Новые утилиты mask-* для линейных, радиальных и конических градиентов.
Пример: mask-t-from-50% — плавное затемнение сверху.
Можно комбинировать несколько масок.

🧵 Новый контроль переноса
Появились:
- wrap-normal
- wrap-break-word
- wrap-anywhere

Особенно полезно в flex и grid, где раньше длинные строки могли ломать вёрстку.

🌈 Цветной drop-shadow
Теперь drop-shadow можно раскрашивать:
drop-shadow-xl drop-shadow-indigo-500/50
Работает как фильтр, создаёт мягкое цветное свечение.

📱 Указатели: coarse / fine
Появились префиксы pointer-coarse, pointer-fine и any-pointer-*.
Полезно для адаптации интерфейса под тач или мышку:
<button class="px-3 py-1 pointer-coarse:px-5 pointer-coarse:py-3">Кнопка</button>


🧮 Выравнивание по последней строке
items-baseline-last и self-baseline-last — выравнивают по последней строке текста.
Актуально для карточек, чатов и типографики.

🛟 Безопасное центрирование
justify-center-safe, items-center-safe — если контент не влезает, он смещается влево, а не обрезается.

💻 Поддержка старых браузеров
Работает корректно на Safari 15 и старом Firefox:
- fallback для OKLCH
- отключение @property, если не поддерживается
- корректная деградация теней и градиентов

🧾 @source inline — для safelist в CSS
Можно подключать классы прямо в CSS:
@source inline("text-red-500 lg:bg-blue-100");


🔄 Другие полезности
- noscript: — для стилей без JS
- user-valid: и user-invalid: — UX-дружественная валидация
- details-content: — для <details>
- inverted-colors: — для системной инверсии

🧩 Вывод
Tailwind 4.1 — не про революцию, а про удобные детали, которые приятно использовать.
Обновляться можно без страха — всё совместимо

CutCode
🔥113



tg-me.com/laravel_cutcode/722
Create:
Last Update:

🎉 Tailwind CSS v4.1 — тени, маски и удобства для вёрстки

Tailwind обновился до версии 4.1. Формально — минорный апдейт, но на деле получил кучу полезных штук. Особенно для тех, кто много работает с UI и адаптивностью.

Вот что появилось:

Текстовые тени
Добавили text-shadow с 5 размерами (2xslg).
Поддерживаются цветные тени, например:
text-shadow-blue-500/50
📌 Удобно для заголовков и эффекта тиснения — белая полупрозрачная тень + тёмный текст.

🎭 CSS-маски
Новые утилиты mask-* для линейных, радиальных и конических градиентов.
Пример: mask-t-from-50% — плавное затемнение сверху.
Можно комбинировать несколько масок.

🧵 Новый контроль переноса
Появились:
- wrap-normal
- wrap-break-word
- wrap-anywhere

Особенно полезно в flex и grid, где раньше длинные строки могли ломать вёрстку.

🌈 Цветной drop-shadow
Теперь drop-shadow можно раскрашивать:
drop-shadow-xl drop-shadow-indigo-500/50
Работает как фильтр, создаёт мягкое цветное свечение.

📱 Указатели: coarse / fine
Появились префиксы pointer-coarse, pointer-fine и any-pointer-*.
Полезно для адаптации интерфейса под тач или мышку:

<button class="px-3 py-1 pointer-coarse:px-5 pointer-coarse:py-3">Кнопка</button>


🧮 Выравнивание по последней строке
items-baseline-last и self-baseline-last — выравнивают по последней строке текста.
Актуально для карточек, чатов и типографики.

🛟 Безопасное центрирование
justify-center-safe, items-center-safe — если контент не влезает, он смещается влево, а не обрезается.

💻 Поддержка старых браузеров
Работает корректно на Safari 15 и старом Firefox:
- fallback для OKLCH
- отключение @property, если не поддерживается
- корректная деградация теней и градиентов

🧾 @source inline — для safelist в CSS
Можно подключать классы прямо в CSS:
@source inline("text-red-500 lg:bg-blue-100");


🔄 Другие полезности
- noscript: — для стилей без JS
- user-valid: и user-invalid: — UX-дружественная валидация
- details-content: — для <details>
- inverted-colors: — для системной инверсии

🧩 Вывод
Tailwind 4.1 — не про революцию, а про удобные детали, которые приятно использовать.
Обновляться можно без страха — всё совместимо

CutCode

BY Новости от CutCode




Share with your friend now:
tg-me.com/laravel_cutcode/722

View MORE
Open in Telegram


Новости от CutCode Telegram | DID YOU KNOW?

Date: |

How to Use Bitcoin?

n the U.S. people generally use Bitcoin as an alternative investment, helping diversify a portfolio apart from stocks and bonds. You can also use Bitcoin to make purchases, but the number of vendors that accept the cryptocurrency is still limited. Big companies that accept Bitcoin include Overstock, AT&T and Twitch. You may also find that some small local retailers or certain websites take Bitcoin, but you’ll have to do some digging. That said, PayPal has announced that it will enable cryptocurrency as a funding source for purchases this year, financing purchases by automatically converting crypto holdings to fiat currency for users. “They have 346 million users and they’re connected to 26 million merchants,” says Spencer Montgomery, founder of Uinta Crypto Consulting. “It’s huge.”

Telegram Gives Up On Crypto Blockchain Project

Durov said on his Telegram channel today that the two and a half year blockchain and crypto project has been put to sleep. Ironically, after leaving Russia because the government wanted his encryption keys to his social media firm, Durov’s cryptocurrency idea lost steam because of a U.S. court. “The technology we created allowed for an open, free, decentralized exchange of value and ideas. TON had the potential to revolutionize how people store and transfer funds and information,” he wrote on his channel. “Unfortunately, a U.S. court stopped TON from happening.”

Новости от CutCode from kr


Telegram Новости от CutCode
FROM USA